<template>
    <ui-main title="筛选器">

        <!-- 外壳 -->
        <ui-screening slot="topAccordion"
                      v-model="searchData"
                      @reset="resetCallback"
                      @search="searchCallback"
                      @fold="foldCallback"
                      :showFoldBtn="true"
                      fold-height="80px">

            <!-- 混合element组件的使用 -->
            <!--用el-tabs和el-tab-pane来制作分组的筛选器-->
            <el-tabs v-model="tab">
                <el-tab-pane label="筛选组1" name="1">
                    <ui-screening-row flex>
                        <ui-screening-row label="单选">
                            <ui-screening-radio v-model="option.radio" :model-id.sync="searchData.radioId" />
                        </ui-screening-row>
                        <ui-screening-row label="多选">
                            <ui-screening-checkbox v-model="option.checkbox" :model-id.sync="searchData.checkboxIds" />
                        </ui-screening-row>
                        <ui-screening-row label="其他">
                            <el-input size="small"  placeholder="输入其他"></el-input>
                        </ui-screening-row>
                    </ui-screening-row>
                    <ui-screening-row label="嵌入组件">
                        <el-input size="small" placeholder="请输入网址" v-model="searchData.input1"  style="width:250px">
                            <template slot="prepend">http://</template>
                        </el-input>
                        <el-input size="small" placeholder="请输入邮箱" v-model="searchData.input2"  style="width:250px">
                            <template slot="prepend">email:</template>
                        </el-input>
                        <el-select size="small" v-model="searchData.selected" placeholder="请选择" >
                            <el-option v-for="item in selectOpt"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-date-picker size="small" v-model="searchData.time" type="datetime" placeholder="选择日期时间"  style="width:200px"></el-date-picker>
                    </ui-screening-row>
                    <ui-screening-row flex>
                        <ui-screening-row label="多重标题">
                            <el-input size="small" v-model="searchData.input1" >
                            </el-input>
                        </ui-screening-row>
                        <ui-screening-row label="多重标题">
                            <el-input size="small" v-model="searchData.input1" >
                            </el-input>
                        </ui-screening-row>
                        <ui-screening-row label="多重标题">
                            <el-input size="small" v-model="searchData.input1" >
                            </el-input>
                        </ui-screening-row>
                    </ui-screening-row>
                </el-tab-pane>
                <el-tab-pane label="筛选组2" name="2">
                    <ui-screening-row label="flex" label-width="100px" flex>
                        <el-input size="small" placeholder="请输入网址" style="width:150px"></el-input>
                        <el-input size="small" placeholder="请输入邮箱" style="width:150px"></el-input>
                        <el-input size="small" placeholder="请输入地址" style="width:150px"></el-input>
                    </ui-screening-row>
                    <ui-screening-row label="flex-around" label-width="100px" flex around>
                        <el-input size="small" placeholder="请输入网址" style="width:150px"></el-input>
                        <el-input size="small" placeholder="请输入邮箱" style="width:150px"></el-input>
                        <el-input size="small" placeholder="请输入地址" style="width:150px"></el-input>
                    </ui-screening-row>
                    <ui-screening-row label="flex-between" label-width="100px" flex between>
                        <el-input size="small" placeholder="请输入网址" style="width:150px"></el-input>
                        <el-input size="small" placeholder="请输入邮箱" style="width:150px"></el-input>
                        <el-input size="small" placeholder="请输入地址" style="width:150px"></el-input>
                    </ui-screening-row>
                </el-tab-pane>
            </el-tabs>
        </ui-screening>

        <div slot="toolbar">
            <ui-btn name="刷新"></ui-btn>
        </div>
        <div class="item one">
            <ui-load-md no-bar file="ui-screening.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                option:{
                    radio:[{id: 1, label: '草莓'}, {id: 2, label: '橡胶'}, {id: 3, label: '葡萄'}, {id: 4,label: '奶子'}],
                    checkbox: [{id: 1, label: '冰淇淋'}, {id: 2, label: '可乐'}, {id: 3, label: '烤肉'}, {id: 4, label: '海洛因'}]
                },
                selectOpt: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                searchData: {
                    input1: '',
                    input2: '',
                    selected: '',
                    time: '',
                    radioId:'',     //通过:model-id.sync同步
                    checkboxIds:'', //通过:model-id.sync同步
                },
                tab: '1'
            }
        },
        methods: {
            resetCallback(data) {
                this.$message('所有数据已重置!')
                console.log('当前数据:', data)
            },
            searchCallback(data) {
                this.$message.success('查询结果见控制台')
                console.log('当前数据:', data)
            },
            foldCallback(action){
                console.log('当前折叠状态:', action);
            }
        },
    }
</script>
